<template>
    <div class="container">
        <div style="display: flex; flex-direction: row; justify-content: flex-end">
            <el-button type="primary" @click="addNewHandler">新增</el-button>
        </div>
        <el-table
            border
            :data="tableData"
            style="margin-top: 20px"
            row-key="id"
            lazy
            :load="loadChildHandler"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            :expand-row-keys="expandRowKeys"
            @expand-change="expandChangeHandler">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column property="title" label="名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column property="resourcesType" label="类型" width="120">
                <template #default="scope">
                    <el-tag type="info" v-if="scope.row.resourcesType == 0">模块</el-tag>
                    <el-tag type="info" v-else-if="scope.row.resourcesType == 1">菜单</el-tag>
                    <el-tag type="info" v-else-if="scope.row.resourcesType == 2">按钮</el-tag>
                    <el-tag type="info" v-else>未知</el-tag>
                </template>
            </el-table-column>
            <el-table-column property="icon" label="图标" width="80" show-overflow-tooltip>
                <template #default="scope">
                    <SvgIcon v-if="scope.row.icon" :icon-class="scope.row.icon" />
                </template>
            </el-table-column>
            <el-table-column property="url" label="URL地址" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column property="method" label="请求方式" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column property="component" label="组件路径" width="120" show-overflow-tooltip></el-table-column>
            <el-table-column property="sort" label="排序" width="80" show-overflow-tooltip></el-table-column>
            <el-table-column property="status" label="状态" width="100" show-overflow-tooltip>
                <template #default="scope">
                    <el-switch
                        v-model="scope.row.status"
                        @change="changeStatusHandler(scope.row)"
                        :active-value="0"
                        :inactive-value="1"
                        size="small" />
                </template>
            </el-table-column>
            <el-table-column property="description" label="描述" width="180" show-overflow-tooltip></el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
                <template #default="scope">
                    <el-button link size="small" type="primary" icon="Edit" @click="editRowHandler(scope.row)">修改</el-button>
                    <el-button link size="small" type="danger" icon="Delete" @click="deleteRowHandler(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div style="display: flex; flex-direction: row; justify-content: flex-end; margin-top: 20px">
            <el-pagination hide-on-single-page background layout="prev, pager, next" :total="tableTotal" @current-change="changePageHandler" />
        </div>
        <ResourcesDialog ref="resourcesDialogRef" @updateTable="initTableData" />
    </div>
</template>

<script setup name="Resources">
import { ref, onMounted } from 'vue'
import { getResourcesTreeApi, modifyStatusByIdApi, deleteByIdApi } from '@/api/system/resources'
import ResourcesDialog from './components/ResourcesDialog.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import SvgIcon from '@/components/SvgIcon'

const refreshTableTree = ref({})
const tableData = ref([])
const tableTotal = ref(0)
const pageSizeRef = ref(10)
const pageNumberRef = ref(1)

// 加载更多数据
const loadChildHandler = async (row, treeNode, resolve) => {
    // 临时存储(expandCount避免循环加载)
    refreshTableTree.value[row.id] = { row, treeNode, resolve, expandCount: 0 }
    const { result } = await getResourcesTreeApi({
        parentId: row.id,
        pageSize: 100,
    })
    resolve(result.data)
    return
}

const resourcesDialogRef = ref(null)
const addNewHandler = () => {
    resourcesDialogRef.value.openDialog()
}
// 初始化数据
const expandRowKeys = ref([])
const initTableData = async (queryOption = {}) => {
    const { result } = await getResourcesTreeApi({
        ...queryOption,
        pageNumber: pageNumberRef.value,
        pageSize: pageSizeRef.value,
    })
    tableData.value = result.data ?? []
    tableTotal.value = result?.total ?? 0
    expandRowKeys.value = []
}

const changePageHandler = (page) => {
    pageSizeRef.value = 10
    pageNumberRef.value = page
    initTableData()
}
// 展开行操作
const expandChangeHandler = (rowData, isExpand) => {
    // 触发拉取数据
    const curr = refreshTableTree.value[rowData.id]
    curr.expandCount++
    if (isExpand && curr.expandCount > 1) {
        loadChildHandler(rowData, curr.treeNode, curr.resolve)
    }
}
onMounted(() => {
    initTableData()
})
// 修改状态
const changeStatusHandler = async (rowData) => {
    if (rowData.id) {
        await modifyStatusByIdApi(rowData.id)
        ElMessage.success('更新成功')
        initTableData()
    }
}
const editRowHandler = (rowData) => {
    console.log(rowData, 'rowData')
    resourcesDialogRef.value.openDialog(rowData)
}
const deleteRowHandler = (rowData) => {
    console.log(1)
    ElMessageBox.confirm('确定要删除', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        await deleteByIdApi(rowData.id)
        ElMessage.success('删除成功')
        initTableData()
    })
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
    box-sizing: border-box;
}
</style>
